<template>
  <el-button @click="showDialog">新增</el-button>
<!-- 标签、事件、函数 -->
<!-- v- @ : -->
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%">
    <el-form
        label-width="100px"
        style="max-width: 460px"
    >
      <el-form-item label="班级名称">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="教室">
        <el-input v-model="formLabelAlign.region" />
      </el-form-item>
      <el-form-item label="时间">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// ref - 定义简单变量 reactive 定义复杂{} []
import {reactive, ref} from "vue";

const dialogVisible = ref(false)

function showDialog() {
  // 让标签显示
  dialogVisible.value = true
}

const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})

function save() {
  console.log(formLabelAlign)
}

</script>

<style></style>
